<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<title>我的对账单</title>
		<link rel="stylesheet" href="/static/css/style.css" />

	</head>

	<body>
		<div class="container" id="bill" style="padding-top: 48px;" v-cloak>
			<div class="tab tab-bill">
				<div class="menu">
					<li :class="tabIndex === 0?'active':''" @click="tabChange(0)">
						<a>收入</a>
					</li>
					<li :class="tabIndex === 1?'active':''" @click="tabChange(1)">
						<a>支出</a>
					</li>
				</div>
			</div>
			
			<div class="blank" v-show="billList.length == 0">
				<span class="icon icon-noitem"></span>
				<h3>没有查询到记录</h3>
			</div>
				<div class="scroll-wrapper" id="pullrefresh" style="top:48px" v-show="billList.length > 0">
<div class="scroll">
				<div class="list list-bill">

					<li v-for="(item,index) in billList" :class="'status-'+item.status">
						<a>
							<i class="icon icon-huibi"></i> ${moneyType[item.type]} <i>【${moneyStatus[item.status]}】</i> <br />
							<em>${item.create_time | formatTime}</em>
							<span>${item.change == 1?'+':'-'}${item.amount}<br />
							
							<em>慧币：${item.balance}</em>
							</span>
						</a>
					</li>

				</div>
				</div>

			</div>

		</div>

	</body>
	<script src="/static/js/mui.min.js"></script>
	<script src="/static/js/vue.min.js"></script>
	<script src="/static/js/zepto.min.js"></script>
	<script src="/static/js/plugins/popup.js"></script>
	<script src="/static/js/plugins/scroll.js"></script>
	<script src="/static/js/plugins/pullrefresh.js"></script>
	<script type="text/javascript">
		var bill = new Vue({
			el: '#bill',
			delimiters: ['${', '}'],
			data: {
				tabIndex: 0,
				billList: [],
				pageNum: 1,
				pageSize: 15,
				pages: 1,
				count: 0,
				moneyType: [],
				moneyStatus: [],
				canPullUp: true
			},
			mounted: function() {
				this.request();
				mui('#pullrefresh').pullRefresh({
					up: {
						contentrefresh: '正在加载...',
						callback: this.pullupRefresh
					}
				});
			},

			methods: {
				doBack() {

				},
				tabChange(index) {

					this.tabIndex = index;
					this.pageNum = 1;
					this.count = 0;
					if(mui('#pullrefresh').pullRefresh()){
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
					};
					
					this.request();

				},
				request() {
					var self = this;

					$.post('/app/wxmp/user/bill', {
						index: this.tabIndex,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}, function(res) {
						if(!self.canPullUp && self.count == 0) {
							mui('#pullrefresh').pullRefresh().refresh(true);
						}
						if(res.errno == 0) {
							console.log(res);
							if(self.pageNum == 1) {
								self.billList = res.data.data;
							} else {
								self.billList = self.billList.concat(res.data.data);
							}
							
							self.pageNum++;
							self.pages = res.data.totalPages;
							self.moneyType = res.data.moneyType;
							self.moneyStatus = res.data.moneyStatus;

						} else {
							popup.prompt(res.errmsg);
						}
					});

				},
				pullupRefresh() {
					var self = this;

					self.count++;
					if(self.count >= self.pages) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						self.canPullUp = false;
					} else {
						setTimeout(function() {

							self.request();
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();

						}, 1500);
					}

				}
				

			},
			filters:{
				formatTime(time) {
					var date = new Date(time);
					Y = date.getFullYear() + '-';
					M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
					h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
					s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					return Y + M + D + h + m + s;
				}
			}

		});
	</script>

</html>